<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title},~{})">
    <title>留言墙----畅所欲言</title>
</head>
<body>
<!-- 头部导航栏 -->
<div th:replace="~{_fragment::blog-header('leavemessage')}"></div>

<!-- 内容区 -->
<div class="blog-content">
    <div class="layui-container">
        <div class="layui-row">
            <div class="base-card animated fadeIn">
                <div class="base-card-header" style="text-align: center;">
                    <span class="fa fa-commenting" style="font-size: 25px;">&nbsp;留言墙----畅所欲言</span>
                </div>
                <div class="base-card-body">
                    <!-- 留言编辑区 -->
                    <div class="blog-comment-box">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <textarea class="layui-textarea" id="blog-editor" style="display: none;"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button id="btn-submit-message" class="layui-btn">提交留言</button>
                            </div>
                        </div>
                    </div>
                    <!-- 留言展示区 -->
                    <div class="comment-display">
                        <fieldset>
                            <legend>留言展示</legend>
                            <ul id="message-display"></ul>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部版权区 -->
<div th:replace="_fragment::blog-footer"></div>
<!--父评论模板  注意：这里的报错不影响页面加载，这是模板,渲染数据{{d.commentId}}后id就不同了-->
<script type="text/html" id="message-parent-tpl">
    <li>
        <div class="comment-parent" id="commentId-{{d.commentId}}">
            <div class="comment-card">
                <div class="comment-card-body">
                    <img class="avatar" src="{{d.fromUser.avatar}}" />
                    <div class="comment-info">
                        <span class="nickname"><a href="#">{{d.fromUser.userName}}</a></span>
                        {{# if(d.fromUser.role!=null && d.fromUser.role.roleId===2 ){  }}
                        <span class="layui-badge layui-bg-blue">{{d.fromUser.role.roleName}}</span>
                        {{# }  }}
                        <span class="content">{{d.content}}</span>
                    </div>
                </div>
                <div class="comment-card-footer">
                    <span class="fa fa-clock-o">&nbsp;{{d.commentTime}}</span>
                    <span><a href="javascript:;" onclick="reply('{{d.commentId}}','{{d.fromUser.userName}}')" style="color: #009688;">回复</a></span>
                </div>
            </div>
        </div>
    </li>
</script>
<!--子评论模板 注意：这里的报错不影响页面加载，这是模板,渲染数据{{d.commentId}}后id就不同了-->
<script type="text/html" id="message-child-tpl">
    <div class="comment-child" id="commentId-{{d.commentId}}">
        <div class="comment-card">
            <div class="comment-card-body">
                <img class="avatar" src="{{d.fromUser.avatar}}"/>
                <div class="comment-info">
                    <span class="nickname"><a href="#">{{d.fromUser.userName}}</a></span>
                    {{# if(d.fromUser.role!=null && d.fromUser.role.roleId===2 ){  }}
                    <span class="layui-badge layui-bg-blue">{{d.fromUser.role.roleName}}</span>
                    {{# }  }}
                    <span>回复<a href="">@{{d.toUser.userName}}</a></span>
                    {{# if(d.toUser.role!=null && d.toUser.role.roleId===2 ){  }}
                    <span class="layui-badge layui-bg-blue">{{d.toUser.role.roleName}}</span>
                    {{# }  }}
                    <span class="content">{{d.content}}</span>
                </div>
            </div>
            <div class="comment-card-footer">
                <span class="fa fa-clock-o">&nbsp;{{d.commentTime}}</span>
                <span><a href="javascript:;" onclick="reply('{{d.commentId}}','{{d.fromUser.userName}}')" style="color: #009688;">回复</a></span>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript" th:src="@{/js/global.js}"></script>
<script type="text/javascript" th:src="@{/js/message.js}"></script>
</body>
</html>
